<template>
	<view>
		<view class="secondaryCard">
			<view class="cardItem" v-for="(item,index) in cardList" :key="index">
				<view class="itemTop">
					<view class="orderNo">订单号:{{item.order_sn}}</view>
					<view class="price"> 支付金额:{{item.price}}</view>
				</view class="itemTop">
				<view> 所属场馆:{{item.venues_name}}</view>
				<view class="itemCenter">
					<image :src="item.image" class="image"></image>
					<view class="cardCenter">
						<view class="number">{{item.card_name}} </view>
					</view>
					<view class="money">{{item.surplus_frequency}}/{{item.frequency}}</view>
				</view>
				<view class="itemBottom">
					<view> 购买时间:{{item.createtime}}</view>
					<view class="time">到期时间:{{item.endtime}}</view>
				</view>
			</view>
		</view>
		<view class="noData" v-if="cardList.length==0">
			<image src="@/static/img/common/nodata.png" class="image"></image>
			<view class="text">你还未购买过次卡～</view>
		</view>
	</view>
</template>

<script>
	import {
		getMyCardRecordList
	} from "@/api/active.js"
	export default {
		data() {
			return {
				cardList: []
			}
		},
		onShow() {
			this.getMyCardRecordList()
		},
		methods: {
			navigatorPage() {
				uni.switchTab({
					url: "/pages/index/index"
				})
			},
			getMyCardRecordList() {
				getMyCardRecordList().then(res => {
					this.cardList = res.data
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.noData {
		padding-top: 390rpx;
		margin: 0 auto;
		text-align: center;

		.image {
			width: 320rpx;
			height: 320rpx;
		}

		.text {
			font-size: 28rpx;
			color: #B0B0B0;
		}
	}

	.secondaryCard {
		margin: 0rpx 28rpx;

		.cardItem {
			padding: 20rpx;
			margin-bottom: 20rpx;
			border-radius: 8rpx;
			background: #FFFFFF;
			border: 1px solid #B0B0B0;
			color: #666666;
			font-size: 28rpx;

			.itemTop {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 10rpx;
			}
			.itemBottom{
				display: flex;
				align-items: center;
				justify-content: space-between;
			}
			.itemCenter {
				margin: 10rpx 0;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.image {
					width: 92rpx;
					height: 92rpx;
					border-radius: 10rpx;
					margin-right: 16rpx;
				}

				.cardCenter {
					flex: 1;

					.number {
						font-weight: bold;
						font-size: 36rpx;
					}

					.time {
						margin-top: 8rpx;
						color: #666666;
					}
				}

				.money {
					font-size: 32rpx;
					color: #FF4D00;
				}
			}
		}
	}
</style>